<template>
  <div class="home-container">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #409EFF">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">总学生数</div>
              <div class="stat-number">{{ stats.totalStudents || 0 }}</div>
              <div class="stat-desc">较上月增长 5%</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #67C23A">
              <el-icon><School /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">班级数量</div>
              <div class="stat-number">{{ stats.totalClasses || 0 }}</div>
              <div class="stat-desc">共计 12 个年级</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #F56C6C">
              <el-icon><Trophy /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">优秀学生</div>
              <div class="stat-number">{{ stats.excellentStudents || 0 }}</div>
              <div class="stat-desc">占比 15%</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #E6A23C">
              <el-icon><DataLine /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">平均成绩</div>
              <div class="stat-number">{{ stats.averageScore || 0 }}</div>
              <div class="stat-desc">较上月提升 2%</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>各年级成绩分布</span>
              <el-radio-group v-model="chartTimeRange" size="small">
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="semester">本学期</el-radio-button>
                <el-radio-button label="year">本学年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container" style="height: 350px">
            <v-chart class="chart" :option="gradeChartOption" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>班级人数分布</span>
            </div>
          </template>
          <div class="chart-container" style="height: 350px">
            <v-chart class="chart" :option="classChartOption" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新动态 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最新学生动态</span>
              <el-button class="button" text>查看更多</el-button>
            </div>
          </template>
          <div class="activity-list">
            <div v-for="(activity, index) in activities" :key="index" class="activity-item">
              <el-avatar :size="32" :src="activity.avatar" />
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>成绩排名 TOP5</span>
              <el-button class="button" text>查看完整榜单</el-button>
            </div>
          </template>
          <div class="ranking-list">
            <div v-for="(student, index) in topStudents" :key="index" class="ranking-item">
              <div class="ranking-index" :class="{'top-three': index < 3}">{{ index + 1 }}</div>
              <el-avatar :size="32" :src="student.avatar" />
              <div class="student-info">
                <div class="student-name">{{ student.name }}</div>
                <div class="student-class">{{ student.class }}</div>
              </div>
              <div class="student-score">{{ student.score }}分</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { User, School, Trophy, DataLine } from '@element-plus/icons-vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'

// 注册 ECharts 必须的组件
use([
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

// 统计数据
const stats = ref({
  totalStudents: 1256,
  totalClasses: 36,
  excellentStudents: 188,
  averageScore: 85.6
})

// 图表时间范围
const chartTimeRange = ref('month')

// 成绩分布图表配置
const gradeChartOption = computed(() => ({
  title: {
    text: '各年级成绩分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['优秀', '良好', '及格', '不及格'],
    bottom: 0
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['高一', '高二', '高三']
  },
  yAxis: {
    type: 'value',
    name: '人数'
  },
  series: [
    {
      name: '优秀',
      type: 'bar',
      stack: 'total',
      data: [320, 302, 301],
      itemStyle: { color: '#67C23A' }
    },
    {
      name: '良好',
      type: 'bar',
      stack: 'total',
      data: [120, 132, 101],
      itemStyle: { color: '#409EFF' }
    },
    {
      name: '及格',
      type: 'bar',
      stack: 'total',
      data: [220, 182, 191],
      itemStyle: { color: '#E6A23C' }
    },
    {
      name: '不及格',
      type: 'bar',
      stack: 'total',
      data: [150, 212, 201],
      itemStyle: { color: '#F56C6C' }
    }
  ]
}))

// 班级人数分布图表配置
const classChartOption = computed(() => ({
  title: {
    text: '班级人数分布',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}人 ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 335, name: '高一(1)班' },
        { value: 310, name: '高一(2)班' },
        { value: 234, name: '高二(1)班' },
        { value: 135, name: '高二(2)班' },
        { value: 148, name: '高三(1)班' },
        { value: 154, name: '高三(2)班' }
      ]
    }
  ]
}))

// 最新动态数据
const activities = ref([
  {
    avatar: '/images/avatars/default.svg',
    title: '张三 提交了期末考试',
    time: '10分钟前'
  },
  {
    avatar: '/images/avatars/default.svg',
    title: '李四 获得三好学生称号',
    time: '2小时前'
  },
  {
    avatar: '/images/avatars/default.svg',
    title: '王五 参加数学竞赛获奖',
    time: '5小时前'
  }
])

// 成绩排名数据
const topStudents = ref([
  {
    avatar: '/images/avatars/default.svg',
    name: '张三',
    class: '高二(1)班',
    score: 98
  },
  {
    avatar: '/images/avatars/default.svg',
    name: '李四',
    class: '高二(3)班',
    score: 97
  },
  {
    avatar: '/images/avatars/default.svg',
    name: '王五',
    class: '高二(2)班',
    score: 96
  },
  {
    avatar: '/images/avatars/default.svg',
    name: '赵六',
    class: '高二(1)班',
    score: 95
  },
  {
    avatar: '/images/avatars/default.svg',
    name: '钱七',
    class: '高二(4)班',
    score: 94
  }
])
</script>

<style scoped>
.home-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.stat-icon :deep(.el-icon) {
  font-size: 32px;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-desc {
  font-size: 12px;
  color: #67C23A;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-list {
  .activity-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #EBEEF5;

    &:last-child {
      border-bottom: none;
    }

    .activity-content {
      margin-left: 12px;
      flex: 1;

      .activity-title {
        font-size: 14px;
        color: #303133;
        margin-bottom: 4px;
      }

      .activity-time {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}

.ranking-list {
  .ranking-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #EBEEF5;

    &:last-child {
      border-bottom: none;
    }

    .ranking-index {
      width: 24px;
      height: 24px;
      border-radius: 12px;
      background-color: #F2F6FC;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #909399;
      margin-right: 12px;

      &.top-three {
        background-color: #F56C6C;
        color: white;
      }
    }

    .student-info {
      margin-left: 12px;
      flex: 1;

      .student-name {
        font-size: 14px;
        color: #303133;
        margin-bottom: 4px;
      }

      .student-class {
        font-size: 12px;
        color: #909399;
      }
    }

    .student-score {
      font-size: 16px;
      font-weight: bold;
      color: #F56C6C;
    }
  }
}

.chart-container {
  width: 100%;
}

.chart {
  height: 100%;
  width: 100%;
}
</style>
